<template>
  <td>
    <div class="my-tag">
      <input
        v-if="isShow"
        :value="value"
        class="input"
        type="text"
        placeholder="输入标签"
        v-focus
        @blur="isShow = false"
        @keyup.enter="changeTag"
      />
      <div v-else class="text" @dblclick="isShow = true">{{ value }}</div>
    </div>
  </td>
</template>

<script>
export default {
  props: {
    value: String,
  },
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    changeTag(e) {
      if (e.target.value.trim() === "") {
        alert("标签不能为空");
        return;
      }
      this.isShow = false;
      this.$emit("input", e.target.value);
    },
  },
};
</script>

<style lang="less"></style>
